<template>
  <div class="father">
    <div class="card">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="never">
            <div class="card-header">
              <span>工单执行情况</span>
            </div>
            <scEcharts height="300px" :option="option"></scEcharts>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="never">
            <div class="card-header">
              <span>工单响应时间</span>
            </div>
            <div class="chart">
              <div class="text">
                <p class="size">平均（小时/单）</p>
                <p>
                  <span class="size">累计</span>
                  <span class="numsize">1.5</span>
                </p>
                <p>
                  <span class="size">去年</span>
                  <span class="numsize">1.2</span>
                </p>
                <p>
                  <span class="size">今年</span>
                  <span class="numsize">1.1</span>
                </p>
              </div>
              <div class="scecharts">
                <scEcharts height="300px" :option="option2"></scEcharts>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="never">
            <div class="card-header">
              <span>员工执行绩效分析</span>
            </div>
            <div class="chart">
              <div class="text">
                <p class="size">累计（分）</p>
                <p>
                  <span class="size">员工1</span>
                  <span class="numsize">125</span>
                </p>
                <p>
                  <span class="size">员工2</span>
                  <span class="numsize">86</span>
                </p>
                <p>
                  <span class="size">员工3</span>
                  <span class="numsize">75</span>
                </p>
              </div>
              <div class="scecharts">
                <scEcharts height="300px" :option="option3"></scEcharts>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="never">
            <div class="card-header">
              <span>工单完成时间</span>
            </div>
            <div class="chart">
              <div class="text">
                <p class="size">平均（小时/单）</p>
                <p>
                  <span class="size">累计</span>
                  <span class="numsize">1.5</span>
                </p>
                <p>
                  <span class="size">去年</span>
                  <span class="numsize">1.2</span>
                </p>
                <p>
                  <span class="size">今年</span>
                  <span class="numsize">1.1</span>
                </p>
              </div>
              <div class="scecharts">
                <scEcharts height="300px" :option="option4"></scEcharts>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-card>
            <div class="card-header">
              <span>设施操作人员绩效</span>
            </div>
            <div class="card-table">
              <div class="select">
                <el-time-picker
                  v-model="value1"
                  is-range
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                />
                <el-button class="btn">下载</el-button>
                <el-button class="btn">打印</el-button>
              </div>
              <el-table
                :data="tableData"
                border
                style="width: 100%"
                :header-cell-style="{ background: '#B4C7E7', color: '#333' }"
              >
                <el-table-column prop="name" label="姓名" />
                <el-table-column prop="num" label="执行工单数" />
                <el-table-column prop="1" label="响应时间（平均）" />
                <el-table-column
                  prop="2"
                  label="实际完成时间/预期完成时间（%平均）"
                />
                <el-table-column prop="3" label="执行率（平均）" />
                <el-table-column prop="4" label="执行成功率（平均）" />
                <el-table-column prop="5" label="备注" />
              </el-table>
              <div class="current">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  v-model:currentPage="currentPage"
                  :page-size="100"
                  layout="prev, pager, next, jumper"
                  :total="1000"
                >
                </el-pagination>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import scEcharts from "@/components/scEcharts";

export default {
  components: {
    scEcharts,
  },
  data() {
    return {
      option: {
        legend: {
          data: ["累计执行率", "执行成功率"],
          orient: "vertical",
          left: "right",
          top: "75%",
          align: "left",
        },
        grid: {
          top: "50px",
          right: "130px",
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: ["2019", "2020", "2021", "今年"],
          name: "年",
          nameTextStyle: {
            color: "#7E7E7E",
          },
          axisLabel: {
            color: "#7E7E7E",
          },
        },
        yAxis: {
          type: "value",
          name: "%",
          nameTextStyle: {
            color: "#7E7E7E",
          },
        },
        series: [
          {
            name: "累计执行率",
            data: [80, 90, 90, 80],
            type: "bar",
            barWidth: "50px",
            barGap: "0%",
            itemStyle: {
              normal: {
                color: "#d6ebfa",
              },
            },
          },
          {
            name: "执行成功率",
            data: [60, 70, 80, 70],
            type: "bar",
            barWidth: "50px",
            itemStyle: {
              normal: {
                color: "#0070c0",
              },
            },
          },
        ],
      },
      option2: {
        grid: {
          top: "50px",
          right: "50px",
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: [
            "21-06",
            "21-07",
            "21-08",
            "21-09",
            "21-10",
            "21-11",
            "21-12",
            "22-01",
            "22-02",
            "22-03",
            "22-04",
            "本月",
          ],
          name: "月",
          nameTextStyle: {
            color: "#7E7E7E",
          },
          axisLabel: {
            color: "#7E7E7E",
          },
        },
        yAxis: {
          type: "value",
          name: "小时",
          nameTextStyle: {
            color: "#7E7E7E",
          },
        },
        series: [
          {
            data: [
              2,
              5,
              3,
              1,
              3,
              2,
              4,
              5,
              2,
              3,
              2,
              { value: 4, itemStyle: { color: "#F79646" } },
            ],
            type: "bar",
            barWidth: "30px",
            itemStyle: {
              normal: {
                color: "#d6ebfa",
              },
            },
          },
        ],
      },
      option3: {
        legend: {
          data: ["员工1", "员工2", "员工3"],
          orient: "vertical",
          left: "right",
          top: "70%",
          align: "left",
        },
        grid: {
          top: "50px",
          right: "110px",
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: ["2019", "2020", "2021", "今年"],
          name: "年",
          nameTextStyle: {
            color: "#7E7E7E",
          },
          axisLabel: {
            color: "#7E7E7E",
          },
        },
        yAxis: {
          type: "value",
          name: "%",
          nameTextStyle: {
            color: "#7E7E7E",
          },
        },
        series: [
          {
            name: "员工1",
            data: [80, 90, 90, 80],
            type: "bar",
            barWidth: "30px",
            barGap: "0%",
            itemStyle: {
              normal: {
                color: "#d6ebfa",
              },
            },
          },
          {
            name: "员工2",
            data: [60, 70, 80, 70],
            type: "bar",
            barWidth: "30px",
            itemStyle: {
              normal: {
                color: "#0070c0",
              },
            },
          },
          {
            name: "员工3",
            data: [90, 85, 90, 100],
            type: "bar",
            barWidth: "30px",
            itemStyle: {
              normal: {
                color: "#ffc40f",
              },
            },
          },
        ],
      },
      option4: {
        grid: {
          top: "50px",
          right: "50px",
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: [
            "21-06",
            "21-07",
            "21-08",
            "21-09",
            "21-10",
            "21-11",
            "21-12",
            "22-01",
            "22-02",
            "22-03",
            "22-04",
            "本月",
          ],
          name: "月",
          nameTextStyle: {
            color: "#7E7E7E",
          },
          axisLabel: {
            color: "#7E7E7E",
          },
        },
        yAxis: {
          type: "value",
          name: "小时",
          nameTextStyle: {
            color: "#7E7E7E",
          },
        },
        series: [
          {
            data: [
              2,
              5,
              3,
              1,
              3,
              2,
              4,
              5,
              2,
              3,
              2,
              { value: 4, itemStyle: { color: "#F79646" } },
            ],
            type: "bar",
            barWidth: "30px",
            itemStyle: {
              normal: {
                color: "#d6ebfa",
              },
            },
          },
        ],
      },
      tableData: [],
      currentPage: 5,
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style lang="less" scoped>
.father {
  display: flex;
  justify-content: center;
  align-items: center;
}
.card {
  width: 100%;
  background-color: #eaf2fa;
}
.card-header {
  padding: 10px;
  font-size: 20px;
  font-weight: 600;
  color: #4d62a5;
  border-bottom: 1px solid #eaedf5;
  span {
    letter-spacing: 2px;
  }
}
.el-row {
  margin-top: 20px;
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.select {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 10px 0;
}
.btn {
  width: 104px;
  height: 30px;
  margin-left: 10px;
  background-color: #b4c7e7;
}
.chart {
  display: flex;
  align-items: flex-end;
}
.text {
  width: 110px;
  margin-bottom: 20px;
}
.text p {
  margin-bottom: 10px;
}
.scecharts {
  width: 85%;
}
.size {
  font-size: 14px;
  color: #7e7e7e;
}
.numsize {
  margin-left: 10px;
  font-size: 18px;
  color: #4d62a5;
}
.card-table {
  .el-table {
    :deep(.el-table__header) {
      width: 100% !important;
      thead th {
        text-align: center;
      }
    }
    :deep(.el-table__body) {
      width: 100% !important;
      tbody td {
        text-align: center;
      }
    }
  }
  .current {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
